import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: () => ({
      xAxis:[],
      list:[],
      legend:[]
    }),
    require: true
  }
} as const


// 定义主体
export default defineComponent({
  props: PropsType,

  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    const color = [
      {start:'rgba(0, 255, 255, 0.1)',end:'#00FFB4'},
      {start:'rgba(12, 135, 230, 0.1)',end:'#0291FF'},
      {start:'rgba(254, 192, 96, 0.1)',end:'#FEC060'},
      {start:'rgba(245, 98, 98, 0.1)',end:'rgba(245, 98, 98, 1)'},
      {start:'rgba(134, 198, 98, 0.1)',end:'rgba(134, 198, 98, 1)'},
      {start:'rgba(245, 225, 147, 0.1)',end:'rgba(245, 225, 147, 1)'},
      {start:'rgba(245, 163, 147, 0.1)',end:'rgba(245, 163, 147, 1)'},
      {start:'rgba(193, 55, 27, 0.1)',end:'rgba(193, 55, 27, 1)'},
      {start:'rgba(239, 101, 191, 0.1)',end:'rgba(239, 101, 191, 1)'}]
    let options = {}
    watch(
      () => props.data,
      (val: any) => {
        //

        options = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(24, 82, 122, 1)',
            textStyle: {
              color: "#fff"
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: val.legend,
            align: 'left',
            left: 0,
            top: 2,
            textStyle: {
              color: "rgba(255,255,255,0.9)"
            },
            itemWidth: 6,
            itemHeight: 6,
            itemGap: 5,
            // icon: 'path://M961.3,130.5c-165.8-0.7-315.7,98.6-379.7,251.6c-64,153-29.4,329.4,87.6,447c117,117.5,293.3,152.9,446.6,89.6C1269,855.5,1369,706,1369.1,540.2C1369.3,314.6,1186.9,131.3,961.3,130.5L961.3,130.5zM961.3,740.5c-106.9,0-193.9-89.9-193.9-200.2c0-110.3,87-200.2,193.9-200.2c106.9,0,194,89.8,194,200.2S1068.1,740.5,961.3,740.5L961.3,740.5z M961.3,740.5'
          },
          grid: {
            top: '30%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: val.xAxis,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14
              }
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid"
              },
            },
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                color: "#063374",
                type: "dashed"
              }
            }
          }],
          series: val.list.map((item,index)=>{
            return {
              name: item.name,
              type: 'bar',
              data: item.data,
              barWidth: 5, //柱子宽度
              barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: color[index].end
                  }, {
                    offset: 1,
                    color: color[index].start,
                  }]),
                  opacity: 1,
                  barBorderRadius: [8, 8, 0, 0],
                }
              }
            }
          })
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options,true)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "160px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

